<template>
    <view class="personInfo">
        <view class="head">
            <image v-if="form.avatar" :src="form.avatar" class="profile" />
            <image v-else src="../../../static/images/mine/missing-face.png" class="profile" />
            <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="profile_btn">点击修改头像</button>
        </view>
        <view class="base">
            <view class="row flex_b">
                <view class="label">姓名</view>
                <view class="value">
                    <up-input inputAlign="right" placeholder="请输入姓名" border="none" v-model="form.nickname">
                    </up-input>
                </view>
            </view>
            <view class="row flex_b" @click="handleSelectSex">
                <view class="label">性别</view>
                <view class="value">
                    <up-input inputAlign="right" v-model="sexValue" disabled disabledColor="#ffffff" placeholder="请选择性别"
                        border="none"></up-input>
                </view>
            </view>
            <view class="submit flex_c" @click="submit">保存</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useMemberStore } from '@/stores';
import type { MemberInfo } from '@/types';
import { onLoad } from '@dcloudio/uni-app';
import { updateMemberInfo, getMemberInfo } from '@/api/mine/userInfo'
import { reactive, computed } from 'vue';
import config from '@/utils/config';
const { uploadUrl } = config
const { setMemberInfo } = useMemberStore()

onLoad(() => {
    getMember()
})

const form = reactive<any>({
    nickname: "",
    avatar: '',
    sex: ''
})
// 获取用户个人信息
const getMember = () => {
    getMemberInfo().then((res: any) => {
        if (res.code == 0 && res.data) {
            setMemberInfo(res.data)
            const data = res.data
            form.nickname = data.nickname
            form.avatar = data.avatar
            form.sex = data.sex
        }
    })
}

const sexValue = computed(() => {
    return form.sex === 0 ? '女' : '男'
})

// 选择性别
const handleSelectSex = () => {
    uni.showActionSheet({
        itemList: ['女', '男'],
        success: function (res) {
            form.sex = res.tapIndex
        },
        fail: function (res) {
            console.log(res.errMsg);
        }
    });
};

// 选择头像
const onChooseAvatar = async (e: any) => {
    const { avatarUrl } = e.detail
    let url: any = await uploadFilePromise(avatarUrl)
    form.avatar = url
}

const uploadFilePromise = (filePath: any) => {
    uni.showLoading({
        title: "正在上传...",
        mask: true
    })
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: uploadUrl,
            filePath: filePath,
            name: 'file',
            header: {
                'Content-Type': 'multipart/form-data',
            },
            formData: {
                'user': '123'
            },
            success: (uploadFileRes) => {
                const data = JSON.parse(uploadFileRes.data)
                if (data?.code == 0 && data?.data) {
                    setTimeout(() => {
                        resolve(data.data)
                        uni.hideLoading()
                    }, 500)
                }
            }
        });
    })
}

const submit = () => {
    updateMemberInfo(form).then((res: any) => {
        if (res.code == 0 && res.data) {
            uni.showToast({
                title: '修改成功'
            })
            setMember()
        }
    })
}
const setMember = () => {
    // 获取用户个人信息
    getMemberInfo().then((res: any) => {
        if (res.code == 0 && res.data) {
            setMemberInfo(res.data)
            setTimeout(() => {
                uni.switchTab({ url: '/pages/tabbar/mine/mine' })
            }, 500)
        }
    })
}
</script>

<style lang="scss" scoped>
.personInfo {
    min-height: 100vh;
    overflow: hidden;
    background: #f8f8f8;
}

.head {
    width: 750rpx;
    height: 260rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .profile {
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
    }

    .profile_btn {
        padding: 0 !important;
        background-color: #fff !important;
        font-size: 24rpx;
    }

    .profile_btn::after {
        border: none !important;
    }
}

.base {
    width: 750rpx;
    padding: 0 32rpx;
    background: #ffffff;
    margin: 0 auto;
    margin-top: 24rpx;
    box-sizing: border-box;
}

.row {
    width: 100%;
    height: 96rpx;
    border-bottom: 2rpx solid #f8f8f8;

    .label {
        width: 228rpx;
        font-weight: 700;
        font-size: 28rpx;
        color: #222222;

        .label_tips {
            font-size: 24rpx;
            color: #888888;
        }
    }

    .value {
        max-width: calc(100% - 228rpx);
        font-size: 28rpx;
    }
}

.submit {
    width: 100%;
    height: 90rpx;
    color: #ff3c2a;
}

:deep(.u-form-item) {
    padding: 0 24rpx;
}
</style>